<template>
  <a-modal :visible="remarkVisible" title="添加备注" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="remarkVisible = false">
    <a-spin :spinning="confirmLoading">
      <j-form-container>
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="备注说明" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
                <!-- <a-input v-model="model.remark" placeholder="请输入至少五个字符"></a-input> -->
                <a-textarea v-model="model.remark" placeholder="请输入至少五个字符" :auto-size="{ minRows: 3, maxRows: 5 }"></a-textarea>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>
  </a-modal>
</template>
<script>
import { postFormAction } from '@/api/manage'
export default {
  name: 'addRemarkModal',
  data() {
    return {
      remarkVisible: false,
      confirmLoading: false,
      model: {},
      validatorRules: {
        remark:[{ required:true,message:'请输入备注说明' }],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      url:{
        remarks:'/oms/order/amzOrderInfo/remarks',
      },
    }
  },
  methods: {
    showModal(record){
      this.model=Object.assign({},record)
      this.remarkVisible = true
    },
    handleOk(){
      const that = this
      that.$refs.form.validate(valid=>{
         if(valid){
          postFormAction(this.url.remarks,this.model)
            .then(res=>{
              if(res.success){
               this.$message.success(res.message)
               this.remarkVisible =false
               this.$emit('addRemarkOk',this.model)
              }else{
                this.$message.warning(res.message)
              }
            }) 
         }
      })
    },
  },
}
</script>